<template>
  <div class="wrapper">
    <el-card>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="商家">
            <el-select v-model="queryParams.sellerId" placeholder="请选择" style="width: 100%" clearable>
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in shopList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item label="创建时间">
            <el-date-picker clearable v-model="queryParams.timeList" type="daterange" start-placeholder="开始时间"
              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8">
          <el-form-item>
            <div style="display: flex;justify-content: flex-start;align-items: center; width: 100%;">
              <div>
                <el-button type="primary" icon="Search" @click="searchList">搜索</el-button>
                <el-button icon="Refresh" @click="handleReset">重置</el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 5px;">
      <el-divider content-position="left">
        <span style="font-weight: bold;font-size: 18px;">订单信息统计</span>
      </el-divider>
      <el-row :gutter="20"  v-loading="loading">
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">订单数量</span>
              <span class="countValue">{{ countData.orderNum ?? '--'}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">订单金额</span>
              <span class="countValue">￥{{ countData.orderAmount ?? '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">优惠券使用数量</span>
              <span class="countValue">{{ countData.couponUseNum ?? '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">总客户数</span>
              <span class="countValue">{{ countData.customerNum ?? '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">新客户数</span>
              <span class="countValue">{{ countData.newCustomerNum ?? '--' }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_item">
              <span class="countLabel">老客户数</span>
              <span class="countValue">{{ countData.oldCustomerNum ?? '--' }}</span>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="top_item">
            <div>统计日期：<span class="countValue">{{ countData.statisticsDay || '暂无' }}</span></div>
          </div>
        </el-col> -->
      </el-row>
      <el-divider content-position="left">
        <span style="font-weight: bold;font-size: 18px;">商品销售情况</span>
      </el-divider>
      <div class="bottom">
        <el-table :data="dataList" v-loading="loading" ref="table" style="margin-top: 20px;min-height: 400px;">
          <el-table-column label="#" type="index" align="left" />
          <!-- <el-table-column label="商家" align="left" prop="sellerId"></el-table-column> -->
          <el-table-column label="商品名称" align="left" prop="goodsName"></el-table-column>
          <el-table-column label="销售次数" align="center" prop="sellerCount"></el-table-column>
          <el-table-column label="销售数量" align="center" prop="sellerNum"></el-table-column>
          <!-- <el-table-column label="销售金额" align="center" prop="sellerAmount"></el-table-column> -->
          <el-table-column label="销售金额" align="center" prop="sellerAmount">
            <template #default="scope">
              ￥{{ scope.row.sellerAmount ?? '--' }}
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-show="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
          :total="total" @pagination="getList" />
      </div>
    </el-card>
  </div>
</template>

<script setup name="Index">
import { orderCount, goodsCount } from '@/api/index.js'
import { listPage as shopListApi } from '@/api/operates/shopList/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance() //proxy
const loading = ref(false)
const dataList = ref([])
const total = ref(0)
const shopList = ref([])
const countData = ref({})

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  timeList: [],
})

onBeforeMount(() => {
  getShopList()  //获取商家下拉
  getCountInfo()  //订单统计
  getList()  //商品统计列表
})

function getShopList() {
  shopListApi({ pageNum: 1, pageSize: 100000 }).then((res) => {
    shopList.value = res.data.list
  })
}
function getCountInfo() {
  let query = {
    ...queryParams.value,
    startDate: queryParams.value.timeList&&queryParams.value.timeList.length ? queryParams.value.timeList[0] + ' 00:00:00' : undefined,
    endDate: queryParams.value.timeList&&queryParams.value.timeList.length ? queryParams.value.timeList[1] + ' 23:59:59' : undefined,
  }
  delete query.timeList
  delete query.pageNum
  delete query.pageSize
  orderCount(query).then((res) => {
    countData.value = res.data
  })
}
function searchList() {
  getList()
  getCountInfo()
}
function handleReset() {
  queryParams.value = {
    pageSize: 10,
    pageNum: 1,
    timeList: [],
  }
  getList()
  getCountInfo()
}
function getList() {
  loading.value = true
  let query = {
    ...queryParams.value,
    startDate: queryParams.value.timeList&&queryParams.value.timeList.length  ? queryParams.value.timeList[0] + ' 00:00:00' : undefined,
    endDate: queryParams.value.timeList&&queryParams.value.timeList.length  ? queryParams.value.timeList[1] + ' 23:59:59' : undefined,
  }
  delete query.timeList
  goodsCount(query).then((res) => {
    dataList.value = res.data.list
    total.value = res.data.total
    loading.value = false
  })

}

</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #efefef;

}

.top_item {
  flex: 1;
  height: 120px;
  background-color: #fff;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .countLabel {
    font-weight: bold;
    font-size: 18px;
    color: #484848;
    margin-bottom: 10px;
  }
  .countValue {
    font-weight: bold;
    font-size: 18px;
    color: #f88038;
  }
}
</style>
